import { Icon, message } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import React from "react";
import CopyToClipboard from 'react-copy-to-clipboard';
import classNames from 'classnames';
import { isDataTable } from '../../component/typeof';
import FormItem from "./FormItem";
import "./index.less";

const FIELDNAME = 'fieldName';
const { getLabel } = WeaLocaleProvider;
const success = () => message.success(getLabel('125245', '复制成功'));
const CopyBtn = ({ id, onClick, type }) => (
  <CopyToClipboard ecId={`${this && this.props && this.props.ecId || ''}_CopyToClipboard@19nutc`} text={id} onCopy={success}>
    <a 
      className={classNames('fn-btn-copy', {'fieldname': type === FIELDNAME})} 
      onClick={e => onClick(e)}
    >
      <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@fagwre`} type="copy" />
      {
        type === FIELDNAME ? getLabel('521427', '复制字段名称') : getLabel('127565', '复制ID')
      }
    </a>
  </CopyToClipboard>
);

export default class FieldView extends React.Component {
  onRemove = e => {
    const { field, onRemove } = this.props;

    e.stopPropagation();
    onRemove(field);
  }

  onClick = e => {
    e.stopPropagation();
    this.props.onClick();
  }

  copyId = e => {
    e.stopPropagation();
  }

  render() {
    const { field, selectedKey, onPropsChange, renderItem, components, onCopy } = this.props;
    const { fieldName } = field;
    const fType = field.type.toLowerCase();
    let dataId = field.uuid;

    if (field.pid) {
      const parentCom = components.find(com => com.uuid === field.pid);

      // 明细表子组件无指定id，避免通过script获取指定组件值
      if (parentCom && isDataTable(parentCom)) {
        dataId = '';
      }
    }

    return (
      <div className={`wea-edc-fb-com f-${fType}`} onClick={this.onClick}>
        <FormItem ecId={`${this && this.props && this.props.ecId || ''}_FormItem@d1rpuw`}
          dataId={dataId}
          field={field}
          selected={selectedKey === field.uuid}
          renderItem={renderItem}
          components={components}
          onPropsChange={onPropsChange}
          onRemove={this.onRemove}
        />
        <div className='action-btns'>
          {
            fieldName ? <CopyBtn ecId={`${this && this.props && this.props.ecId || ''}_CopyBtn@8yzdjp`} id={fieldName} onClick={this.copyId} type={FIELDNAME}/> : ''
          }
          {
            // 布局组件不支持字段复制
            dataId && onCopy && !isDataTable(field) ?
              <a
                className='fn-btn-copy fn-btn-copy-field'
                onClick={() => { onCopy(dataId) }}
              >
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nm4izr`} type="copy" />{getLabel('516393', '复制字段')}
              </a> : null
          }
          {
            dataId ? <CopyBtn ecId={`${this && this.props && this.props.ecId || ''}_CopyBtn@8fjggl`} id={dataId} onClick={this.copyId} /> : ''
          }
          <a className='f-btn-del' onClick={this.onRemove}>
            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@xc5yg6`} type="cross" />
          </a>
        </div>
      </div>
    );
  }
}

FieldView.defaultProps = {
  field: {},
  selectedKey: '',
  onClick: () => { },
  onRemove: () => { },
  onPropsChange: () => { },
  renderItem: () => null
}